import { Component } from 'react'

// 18版本之前 setState本质是同步 表现可以是同步 也可以是异步
// 18版本 setState本事是同步 表现就是异步

class App extends Component {
  state = {
    count: 1,
    msg: '',
  }

  addOne = () => {
    console.log(this.state.count) //1

    //1. setstate本事是同步的, 表现是异步的(延迟更新)
    // this.setState(
    //   {
    //     count: this.state.count + 1,
    //   },
    //   () => {
    //     console.log('我会在数据更新后, 组件更新后执行')
    //     console.log(this.state.count)
    //     console.log(document.getElementById('root').innerHTML) // 获取最新的DOM
    //   }
    // )

    setTimeout(() => {
      this.setState({
        count: this.state.count + 1,
      })

      console.log(this.state.count)
    }, 0)
    // this.setState({
    //   count: this.state.count + 1,
    // })
    // this.setState({
    //   count: this.state.count + 1,
    // })
    // this.setState({
    //   count: this.state.count + 1,
    // })

    // 需求就是 后面的值依赖之前的数据+1 =>3
    // 选择: 将来如果你关注的事状态变化的过程, 新写法 箭头函数; 只关注最后的结果 老写法 对象
    // this.setState((preState) => {
    //   return {
    //     count: preState.count + 1,
    //   }
    // })
    // this.setState((preState) => {
    //   return {
    //     count: preState.count + 1,
    //   }
    // })
    // this.setState((preState) => {
    //   return {
    //     count: preState.count + 1,
    //   }
    // })

    // this.setState({
    //   msg: 'hello XXX',
    // })

    // 2. 合并更新(覆盖)
    // this.setState({
    //   count: this.state.count + 1,
    //   msg: 'hello XXX',
    // })
  }
  render() {
    return (
      <div>
        <h3>setState - {this.state.count}</h3>
        <button onClick={this.addOne}>点击+1</button>
      </div>
    )
  }
}

export default App
